<template>
	<view v-if="!!post" class="star-post-item" @click="selectPost" @longpress="longpressPost">
		<view class="content">
			<u-image width="340rpx" :height="postImgHeight" :mode="propOption.imgMode" :src="post.imgs[0]"></u-image>
		</view>
		<view class="content-box">
			<view class="title star-line-2">
				{{ post.title }}
			</view>
			<view class="user-box">
				<view class="left">
					<image class="avatar" :src="post.user.avatar" :mode="propOption.avatarMode"
						@click.stop="clickUserAvatar">
					</image>
					<view class="nickname-box star-line-1">
						<view class="nickname" @click.stop="clickUserNickname">
							{{ post.user.nickname }}
						</view>
					</view>
				</view>
				<view class="right">
					<view v-if="propOption.showLike" class="item-box" hover-stop-propagation @click.stop="toggleLike">
						<image v-if="postLikes[post.id].isLiked" class="icon scale-ver-center"
							:src="propOption.iconLiked">
						</image>
						<image v-else class="icon" :src="propOption.iconLike"> </image>
						<text class="text">
							{{ numberFormat(postLikes[post.id].like_num) }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timeFrom from "../../utils/timeFrom.js";
	import numberFormat from "../../utils/numberFormat.js";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		likePost
	} from "@/api/discover.js";

	export default {
		props: {
			post: {
				type: Object,
				default: () => ({}),
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			my_user: {
				type: Object,
				default: () => ({}),
			},
		},
		mounted(options) {
			uni.getImageInfo({
				src: this.post.imgs[0],
				success: (image) => {
					const imgWidth = image.width;
					const imgHeight = image.height;

					// 更新最大高度
					if ((imgHeight / imgWidth) > 1) {
						this.postImgHeight = 453;
					}
				},
				fail: (error) => {
					console.error("Image loading failed:", error);
				}
			});
		},
		data() {
			return {
				postImgHeight: 340,
				propOption: {
					mode: 2,
					avatarMode: "aspectFill",
					imgMode: "aspectFill",
					// lineShow: 6, // 超出多少行显示省略号
					showFooter: true,
					showCheckBtn: false,
					showCheckFail: true,
					showCheckPass: true,
					showFocus: true,
					showChat: true,
					showMore: true,
					showShare: true,
					showView: true,
					showComment: true,
					showLike: true,
					showDelete: true,
					iconShare: "/uni_modules/star-community/static/share.svg",
					iconView: "/uni_modules/star-community/static/view.svg",
					iconComment: "/uni_modules/star-community/static/comment.svg",
					iconLike: "/static/images/icon_collection.png",
					iconLiked: "/static/images/icon_collection_s.png",
					iconDelete: "/uni_modules/star-community/static/delete.svg",
					iconMore: "/uni_modules/star-community/static/more.svg",
				},
				isFocusUser: this.post?.isFocusUser || false,
			};
		},
		watch: {
			option: {
				handler(newVal, oldVal) {
					this.propOption = {
						...this.propOption,
						...newVal,
					};
				},
				deep: true, // 深度监听
				immediate: true, // 立即执行
			},
		},
		computed: {
			...mapGetters(['postLikes']),
		},
		methods: {
			...mapMutations(['UPDATEPOSTLIKES']),
			timeFrom,
			numberFormat,
			// 选中帖子
			selectPost() {
				this.goto(`/social/pages/post-detail/post-detail?id=${this.post.id}`);
				this.$emit("selectPost", this.post);
			},
			// 长按帖子
			longpressPost() {
				this.$emit("longpressPost", this.post);
			},
			// 选中用户头像
			clickUserAvatar() {
				this.goto(`/social/pages/homepage/homepage?id=${this.post.user_id}`);

				this.$emit("clickUserAvatar", this.post);
			},
			// 选中用户昵称
			clickUserNickname() {
				this.goto(`/social/pages/homepage/homepage?id=${this.post.user_id}`);

				this.$emit("clickUserNickname", this.post);
			},
			// 点击关注用户
			clickFocusUser() {
				this.isFocusUser = true;
				this.$emit("clickFocusUser", this.post);
			},
			// 点击私聊用户
			clickChatUser() {
				this.$emit("clickChatUser", this.post);
			},
			// 点击更多
			clickMore() {
				this.$emit("clickMore", this.post);
			},
			// 点击分享帖子
			clickSharePost() {
				this.$emit("clickSharePost", this.post);
			},
			// 点击评论帖子
			clickCommentPost() {
				this.$emit("clickCommentPost", this.post);
			},
			// 点击预览图片
			previewImg(urls, current) {
				uni.previewImage({
					urls,
					current,
				});
			},
			// 点击喜欢
			toggleLike() {
				let _isLiked = this.postLikes[this.post.id].isLiked
				let _like_num = this.postLikes[this.post.id].like_num

				// 根据当前的 isLiked 状态来增加或减少点赞数量
				_like_num = _isLiked ? _like_num - 1 : _like_num + 1;
				_isLiked = !_isLiked;
				this.UPDATEPOSTLIKES([{
					id: this.post.id,
					isLiked: _isLiked,
					like_num: _like_num
				}])
				likePost({
					id: this.post.id,
					action: _isLiked ? 1 : 0
				});
				this.$emit("toggleLike", this.post, _isLiked);
			},
			// 删帖
			clickDeletePost() {
				this.$emit("clickDeletePost", this.post);
			},
			// 驳回帖子
			clickFailPost() {
				this.$emit("clickFailPost", this.post);
			},
			// 通过帖子
			clickPassPost() {
				this.$emit("clickPassPost", this.post);
			},
			goto(url) {
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	/* start--文本行数限制--start */
	.star-line-1 {
		-webkit-line-clamp: 1;
	}

	.star-line-2 {
		-webkit-line-clamp: 2;
	}

	.star-line-3 {
		-webkit-line-clamp: 3;
	}

	.star-line-4 {
		-webkit-line-clamp: 4;
	}

	.star-line-5 {
		-webkit-line-clamp: 5;
	}

	.star-line-6 {
		-webkit-line-clamp: 6;
	}

	.star-line-7 {
		-webkit-line-clamp: 7;
	}

	.star-line-8 {
		-webkit-line-clamp: 8;
	}

	.star-line-9 {
		-webkit-line-clamp: 9;
	}

	.star-line-1,
	.star-line-2,
	.star-line-3,
	.star-line-4,
	.star-line-5,
	.star-line-6,
	.star-line-7,
	.star-line-8,
	.star-line-9 {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box; // 弹性伸缩盒
		-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
	}

	/* end--文本行数限制--end */

	.scale-ver-center {
		animation: scale-ver-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	}

	@keyframes scale-ver-center {
		0% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1.5);
		}

		100% {
			transform: scale(1);
		}
	}

	.star-post-item {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 340rpx;
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;

		.user-box {
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 12rpx;
			width: 100%;

			.avatar {
				height: 56rpx;
				width: 56rpx;
				border-radius: 50%;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.nickname {
					font-family: Roboto;
					color: #000000;
					font-size: 24rpx;
				}
			}

			.right {
				display: inline-flex;
				align-items: center;

				.focus-box {
					border: 2rpx #55aaff solid;
					border-radius: 100rpx;
					color: #55aaff;
					font-size: 26rpx;
					padding: 6rpx 20rpx;
				}

				.chat-box {
					@extend .focus-box;
				}

				.delete-box {
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: red;
				}

				.status-box {
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: orange;
				}

				.more-icon {
					margin-left: 20rpx;
					height: 50rpx;
					width: 50rpx;
					flex-shrink: 0;
				}
			}
		}

		.title {
			font-weight: 700;
			font-family: HYQiHei 65s;
			color: #000000;
			font-size: 28upx;
			line-height: 40upx;
		}

		.content {
			width: 340rpx;
			min-height: 340rpx;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
		}

		.content-box {
			padding: 13rpx 24rpx;
			border-radius: 0 0 8rpx 8rpx;
		}

		.content-class {
			white-space: normal;
			word-wrap: break-word;
			overflow: hidden;
		}

		.img-list-box {
			margin-top: 10rpx;
			display: inline-flex;
			flex-wrap: wrap;

			.img {
				margin: 10rpx 10rpx 0 0;
				flex-shrink: 0;
				border-radius: 20rpx;
				height: 200rpx;
				width: 200rpx;
			}
		}

		.topic-container {
			margin-top: 20rpx;

			.topic-box {
				padding: 8rpx 14rpx;
				border-radius: 20rpx;
				display: inline-flex;
				align-items: center;
				border: 2rpx #eee solid;

				.icon {
					flex-shrink: 0;
					height: 30rpx;
					width: 30rpx;
					margin-right: 10rpx;
				}

				.text {
					font-family: PingFang SC;
					margin-left: 8rpx;
					color: #a1a1b4;
					font-size: 18rpx;
				}
			}
		}

		.item-box {
			display: inline-flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 26rpx;
				height: 22rpx;
			}

			.text {
				font-family: PingFang SC;
				margin-left: 8rpx;
				color: #a1a1b4;
				font-size: 18rpx;
			}
		}

		.btn-list-box {
			margin-top: 20rpx;
			width: 100%;
			display: inline-flex;
			align-items: center;
			gap: 20rpx; // 部分机型不支持，管他呢，我的机型支持就行了

			.btn {
				flex: 1;
			}
		}
	}
</style>